<template>
	<view class="container" v-if="isLandscape">
		<!-- 视频层 -->
		<video src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/dt_bg.mp4" 
		autoplay
		loop
		:controls="false"
		class="bg-video"
		object-fit="cover"
		></video>
		<!-- 内容层 -->
		<view class="content">
			<!-- 头像和等级 -->
			<view class="header-img">
				<image class="my-head" src="https://img0.baidu.com/it/u=552049004,2608757118&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800"></image>
				<view class="lv">{{ userInfo.level }}</view>
			</view>
			
			<!-- 个人信息 -->
			<view class="user-info">
				{{userInfo.nickname}} 
			</view>
			<image class="vip" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/vip.png"></image>
			
			<!-- 末日币情况 -->
			<view class="user-money">
				{{userInfo.enderCoin}} 
			</view>
			<image class="money-img" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/mr_money.png"></image>
			
			
			
			
			<!-- 匹配效果 -->
			<view class="match" v-show="match">
				{{ waitingTime }} 末日行动 之 拯救五角大楼
			</view>
			
			<!-- 右上角的金币和设置 -->
			<RightTools class="money"></RightTools>
			
			<!-- 广告栏 -->
			<swiper class="advertisement" indicator-dots autoplay circular>
				<swiper-item>
					<image class="banner" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/banner1.jpg" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="banner" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/banner2.jpg" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item>
					<image class="banner" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/banner3.jpg" mode="scaleToFill"></image>
				</swiper-item>
			</swiper >
			
			
			<!-- 开始游戏 -->
			<view class="start-game" @click="startGame" v-if="!match">
				开始游戏
			</view>
			<view class="start-game" @click="stopGame" v-else>
				取消准备
			</view>
			
			<!-- 左下角的功能区 -->
			<LeftTools class="tools"></LeftTools>
			<!-- 世界聊天框 -->
			<WorldChatBox class="message-content"></WorldChatBox>
			
			<!-- 组队邀请的同意 -->
			<view class="invite"  :class="{ 'invite-show': isShow }">
				<view class="f-name">{{sendName}}的邀请</view>
				<view class="f-btn"><uni-icons type="checkmarkempty" size="20" color="#7aff55"></uni-icons></view>
				<view class="f-btn"><uni-icons type="closeempty" size="20" color="#ff546b"></uni-icons></view>
			</view>
			
		</view>
		
	</view>
	<view class="tip" v-else>
	  <text>请将设备旋转到横屏模式以查看内容</text>
	</view>
</template>

<script>
	import audioManager from '@/utils/audioManager.js';
	//导入请求接口
	import {getUserInfo} from "@/api/index";
	/* 世界聊天框 */
	import WorldChatBox from "@/component/WorldChatBox.vue"
	/* 左下角 */
	import LeftTools from "@/component/LeftTools.vue"
	/* 右上角 */
	import RightTools from "@/component/RightTools.vue"
	
	
	
	// import Money from "@/static/icon/money.vue"
	export default {
		data() {
			return {
				isLandscape: true,
				match:false,
				waitingTime: "00:00",
				myInterval:null,
				userInfo:{},
				clientObj:client,
				isShow: false,
				sendName:""
			}
		},
		components:{
			WorldChatBox,
			LeftTools,
			RightTools
		},
		//当页面加载完成触发
		mounted() {
			this.getInfo();
			this.myInfo();
		},
		methods: {
			//订阅关于自己的消息
			myInfo(){
				let userId = uni.getStorageSync("userInfo").id;
				console.log("userId订阅自己",userId);
				//订阅自己的消息
				this.clientObj.subscribe("/game/"+userId, (msg) => {
					console.log("JSONMSG",msg.body);
					if(this.isShow == false){
						let msgJson = JSON.parse(msg.body);
						this.sendName = msgJson.sendName;
						//tzxx
						audioManager.playAudio('tzxx', false);
						this.isShow = true;
						this.timer = setTimeout(() => {
						  this.isShow = false;
						}, 5000);
						console.log("收到组队邀请",msg);
					}
				});
			},
			//getInfo 获取用户信息
			getInfo(){
				getUserInfo().then((data)=>{
					console.log("结果",data);
					this.userInfo = data.data;
				})
			},
			initStartGame(){
				console.log("订阅开始游戏");
				//订阅开始游戏
				this.clientObj.subscribe("/user/game/start", (msg) => {
					console.log(msg);
				});
			},
			//开始游戏
			startGame(){
				this.match = true;
				// 分  秒  Minutes and seconds
				let minutes = 0;
				let seconds = 0;
				this.myInterval = setInterval(()=>{
					seconds++;
					if(seconds==60){
						seconds=0;
						minutes++;
					}
					//补0
					let a,b;
					if(seconds<10){
						a = "0"+seconds
					}else{
						a = seconds;
					}
					if(minutes<10){
						b = "0"+minutes
					}else{
						b = minutes;
					}
					this.waitingTime = b + ":" + a;
				},1000);
				//点开始游戏再播放
				audioManager.playAudio('dt_btn', false);
				audioManager.playAudio('dating', true);
				//audioManager.playAudio('qiangshen', true);
				
				//给后端通信发送排队指令
				//传等级昵称过去
				let userInfo = uni.getStorageSync("userInfo");
				let json = {
					id:userInfo.id,
					level:userInfo.level,
					nickname:userInfo.nickname
				}
				client.send("/mori/lineUp", {}, JSON.stringify(json));
				this.initStartGame();
			},
			stopGame(){
				//取消排队
				client.send("/mori/unLineUp", {}, "");
				
				this.match = false;
				this.waitingTime="00:00";
				clearInterval(this.myInterval);
				//摧毁所有音频
				audioManager.destroyAll();
			}
		}
	}
</script>

<style scoped>
.tip{
	width: 100%;
	height: 100vh;
	text-align: center;
	line-height: 100vh;
	font-size: 20px;
}
.bg-video{
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 1;
	left: 0px;
	top: 0px;
}
.content{
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 2;
	left: 0px;
	top: 0px;
}
.header-img{
	width: 60px;
	height: 60px;
	position: absolute;
	display: inline-block;
	left: 5px;
	top: 5px;
	border: 1px solid #ccc;
}


.user-info{
	width: 120px;
	height: 20px;
	position: absolute;
	left: 100px;
	top: 5px;
	color: #fff;
	font-size: 15px;
}
.vip{
	width: 25px;
	height: 25px;
	position: absolute;
	left: 70px;
	top: 5px;
	/* box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); */
}


.user-money{
	width: 120px;
	height: 20px;
	position: absolute;
	left: 100px;
	top: 35px;
	color: #fff;
	font-size: 15px;
}
.money-img{
	width: 20px;
	height: 20px;
	position: absolute;
	left: 72px;
	top: 35px;
	/* box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); */
}







.my-head{
	width: 60px;
	height: 60px;
}
.lv{
	height: 20px;
	width: 90%;
	text-align: right;
	position: absolute;
	bottom: 0px;
	color: #fff;
	font-size: 12px;
	text-shadow: 1px 1px 0 black;
}
.start-game{
	width: 160px;
	height: 60px;
	position: fixed;
	right: 15px;
	bottom: 15px;
	border: 1px solid #ccc;
	background-color: #790002;
	color: #eb9a9b;
	text-align: center;
	line-height: 60px;
	font-size: 20px;
	font-weight: bold;
}


.invite {
  width: auto;
  height: 30px;
  position: fixed;
  right: -200px; /* 初始位置在屏幕外 */
  bottom: 85px;
  display: flex;
  padding: 0 5px;
  background-color: rgba(0, 0, 0, 0.6);
  line-height: 30px;
  border-radius: 5px;
  transition: right 0.3s ease; /* 添加过渡效果 */
}
.invite-show {
  right: 15px; /* 显示时的位置 */
}
.f-name {
  width: auto;
  padding: 0 10px;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
}
.f-btn {
  width: 30px;
}



.match{
	width: 260px;
	height: 20px;
	position: absolute;
	background-color: rgba(235, 154, 155, 0.6);
	top: 15px;
	left: calc((100% - 260px) / 2);
	color: #fff;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	border-radius: 5px;
}
.money{
	position: absolute;
	right: 15px;
	top: 5px;
	color: #fff;
}
.item-icon{
	float: right;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	background-color: #eb9a9b;
}
.item-icon:nth-child(1){
	margin-right: 0px;
}

.tools{
	position: absolute;
	left: 15px;
	bottom: 15px;
}
.message{
	width: 240px;
	height: 20px;
	position: fixed;
	left: 15px;
	bottom: 50px;
	border: 1px solid #ccc;
	color: #fff;
}
.advertisement{
	width: 240px;
	height: 120px;
	position: fixed;
	right: 15px;
	top: 50px;
	color: #fff;
	border-radius: 5px;
}
.message-content{
	width: 240px;
	height: 245px;
	position: fixed;
	left: 15px;
	bottom: 55px;
	color: #fff;
	border-radius: 15px 15px 0 0;
}

.banner{
	width: 100%;
	height: 100%;
}
</style>
